<template>
  <view>
    <view v-if="consumer_id != ''">
      <view class="card">
        <image class="profile" :src="profile" mode="aspectFill"></image>
        <view class="nickname">
          {{name}}
        </view>
      </view>

      <view>
        <el-card class="menu">
          <view class="menu-item" @click="toLogin()">切换用户</view>
          <view class="menu-item" @click="toOrder()">订单</view>
          <!-- <view class="menu-item" @click="toInfo()">修改个人信息</view> -->
          <!-- <view class="menu-item" @click="toSetting()">设置服务器</view> -->
          <view style="height: 50rpx;"></view>
        </el-card>
      </view>

      <view class="btn-exit">
        <el-button type="danger" @click="logout()">退出登录</el-button>
      </view>
    </view>

    <view v-else>
      <el-card class="menu">
        <view style="height: 100rpx;"></view>
        <view class="menu-item" @click="toLogin()" style="text-align: center;">登录</view>
        <view style="height: 50rpx;"></view>
      </el-card>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        profile: "",
        name: "",
        consumer_id: ""
      }
    },
    onShow() {
      this.profile = "/api/images/profiler/" + uni.getStorageSync('profile')
      this.name = uni.getStorageSync('name')
      this.consumer_id = uni.getStorageSync('id')
      if (this.consumer_id == "") {
        this.$message.warning('请登录')
      } else {
        console.log("登录了");
      }
    },
    methods: {
      logout() {
        uni.clearStorageSync()
        this.profile = ""
        this.name = ""
        this.consumer_id = ""
        this.$message.info('退出登录成功')
      },
      toLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      toOrder() {
        uni.navigateTo({
          url: '/pages/order/order'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #eee;
    border-radius: 25rpx;
    padding: 50rpx 0;
    margin: 20rpx;

    .profile {
      margin: 15rpx;
      width: 150rpx;
      height: 150rpx;
    }

    .nickname {
      margin: 15rpx;
    }
  }


  .menu {
    margin: 15rpx;

    .menu-item {
      font-size: 40rpx;
      padding: 15rpx 0;
      border-bottom: 2rpx solid #eee;
    }
  }

  .btn-exit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50rpx;
  }
</style>